<!doctype html>
<html ng-app="myApp">
    <head>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="libs/bootstrap-3.3.0/css/bootstrap.min.css"/>	
    	<script src="libs/jquery.min.js"></script>
        <script src="libs/layer/layer.js"></script>
        <script src="libs/juicer.js"></script>
        <script type="text/javascript">
			/* 单位级别 */
        	function alertDwjb(title,content) {
				layer.open({
					type : 1,
					title : title,
					closeBtn : 1,
					shadeClose : true,
					area : ['500px','350px'],
					scrollbar : false,
					content : content
				});
			}
        	
			/* 查询白名单数据 */
			var dataQueue=[];//只缓存一页的数据
			function getList(curpageno,pagesize){
				var params={
					qynbzh:$("#qynbzh").val(),			//企业内部账户
					ygmc:$("#ygmc").val(),				//员工名称
					sfxh:$("#sfxh").val(),				//身份证号
					monthsalary:$("#monthsalary").val(),//月薪范围
					months:$("#months").val(),			//已发工资月数
					cxlb:$("#cxlb").val(),				//查询类别
					curpageno:curpageno,
					pagesize:pagesize
				};
				
				$.getJSON("data/whitelist.json",function(data){
					/* $.ajax({
						type: "POST",
				        url: "data/whitelist.json",//"/bmd/getWhiteUserList",
				        contentType:"application/x-www-form-urlencoded",
				        data:params,
				        dataType: "json",
				        success: function (data) {//data{list,totalitem} */
				        	if(data!=null&&data.list.length>0&&data.totalitem!=0){
				        		//渲染数据
					        	var tpl=[
				        	         '{@each list as item,index}',
					        	         '<tr>',
							        		 '<td><input type="checkbox" class="selectedItem" key="${cust_idt_no}">${index}</td>',
							        		 '<td>${item.ent_cust_id}</td>',
							        		 '<td>${item.ent_name}</td>',
							        		 '<td>${item.cust_name}</td>',
							        		 '<td>${item.cust_idt_no}</td>',
							        		 '<td>${item.iswhite}</td>',
							       		 '</tr>',
					        		 '{@/each}'
				        		].join("");
					        	var html=juicer(tpl, data);
								$("#tabBody").html(html);
								
								//渲染分页组件
								setPageHtml("pageTarget",data.totalitem,1,10,3,"getList");
								
								//添加事件
								$("input[id=checkAll]").change(onCheckedAll);
								$("input[class=selectedItem]").change(onCkeckedOne);
				        	}else{
				        		console.log(data);
				        	}
				       /*  },
				        error: function (message){
				        	console.log(message);
				        }
					}); */ 
				})
			}
			
			
			
			/* 缓存勾选数据 */
			var cachedQueue=[];
			function removeDataFromCacheByKey(obj){//添加
				var key = $(obj).attr("key");
				var index=keyInQueue(obj,cachedQueue);
				if(index!=-1){
					cachedQueue.remove(index);
				}
			};
			function addDataToCacheByKey(obj){//删除
				var key = $(obj).attr("key");
				var data=getDataByKey(key);
				if(keyInQueue(key,cachedQueue)<0){
					cachedQueue.push(data);
				}else{
					console.log("有重复数据!");
				}
			};
			function getDataByKey(key){
				console.log(dataQueue);
				for(var i=0;i<dataQueue.length;i++){
					if(key==dataQueue[i].cust_idt_no){
						return dataQueue[i];
					}
				}
			};
			function keyInQueue(key,cachedQueue){
				if(key==null||key==undefined||cachedQueue==undefined||cachedQueue==null||cachedQueue.length<=0){
					return -1;
				}else{
					for(var i=0;i<cachedQueue.length;i++){
						if(key==cachedQueue[i].cust_idt_no){
							return i;
						}
					}
					return -1;
				}
			}
			
			
			
			/* 勾选事件 */
			function onCheckedAll(){//全选或不选
				if($(this).attr("checked")){
					$("input[class=selectedItem]").each(function(){
						alert($(this).parent().html())
					})
				}else{
					$("input[class=selectedItem]").each(function(index){
						alert($(this).val())
					})
				}
			}
			function onCkeckedOne(obj,flag){//勾选或取消一条
				if(flag==false){
					$(obj).attr("checked",false);
					removeDataFromCacheByKey(obj);
				}else{
					$(obj).attr("checked",true);
					addDataToCacheByKey(obj);
				}
			}
			
			
			/* 提交待添加的白名单 */
			function submitAddedWhiteList(){
				//获得所有企业编号
				var ent_cust_ids = (function(){
					var arr=[];
					for(var i=0;i<cachedQueue.length;i++){
						if(arr.join("|").indexOf(cacheQueue[i].ent_cust_id)<0){
							arr.push(cacheQueue[i].ent_cust_id);
						}
					}
				})(cachedQueue);
				
				//获取每个企业编号对应的企业级别
				$.ajax({
					type: "POST",
			        url: "/bmd/getEntLvl",
			        contentType:"application/json",
			        data:ent_cust_ids,
			        dataType: "json",
			        success: function (data) {//[{ent_cust_id:xxxxx,ent_lvl:yyyy}]
						//给ent_cust_id和entlvl匹配中文名称
						var ent_named_kv=(function(){
							var kvArr=[];
							for(var i=0;i<data.length;i++){
								var d=data[i];
								for(var j=0;j<cachedQueue.length;j++){
									var c=cachedQueue[j];
									if(d.ent_cust_id==c.ent_cust_id){
										var obj={};
										obj.ent_cust_id=d.ent_cust_id;
										obj.envlvl=d.ent_lvl;
										obj.ent_name=c.ent_name;
										kvArr.push(obj);
									}
								}
							}
							return kvArr;
						})(cachedQueue,data);	
			        	
			        	//选择出还未确认企业级别的
			        	var ent_named_nk=ent_named_kv.filter(function(a){
			        		if(a.ent_lvl==null){
			        			return true
			        		}else{
			        			return false
			        		}
			        	});
			        	if(ent_named_nk.length>0){
			        		//取得弹出内容
			        		var alertHtml=(function(){
				        		var htmlArr=['<table class="table table-bordered">'];
				        		var tpl=[
				        	         '{@each data.LIST as item,index}',
									  	'<tr>',
											'<td style="width:35%;text-align:center;"><strong>${ent_name}</strong></td>',
											'<td style="width:50%;text-align:center;">'+
												'<select class="form-control" style="width:70%;" id="id_${ent_cust_id}">',
													'<option value="1">A+</option>',
													'<option value="2">A</option>',
													'<option value="3" selected>A-</option>',
													'<option value="4">B+</option>',
													'<option value="5">B</option>',
													'<option value="6">B-</option>',
													'<option value="7">C+</option>',
													'<option value="8">C</option>',
													'<option value="9">C-</option>',
												'</select>',
											'</td>',
										'</tr>',
					        		 '{@/each}'
				        		];
				        		var trs=juicer(tpl, {LIST:ent_named_nk});
				        		htmlArr.append(trs);
				        		htmlArr.append('</table>');
				        		return htmlArr.join("");
				        	})(ent_named_nk);
			        		//弹出内容，并取得选择结果
				        	var result_kv=alertDwjb("请选择企业的企业级别:",alertHtml);//result[{ent_cust_id:xxx,entlvl:yyy}]
			        		//合并结果到ent_named_kv
				        	ent_named_kv=(function(){
				        		var rs=[];
				        		for(var i=0;i<ent_named_kv.length;i++){
				        			var nkv=ent_named_kv[i];
				        			for(var j=0;j<result_kv.length;j++){
				        				var rkv=result_kv[j];
				        				if(nkv.ent_cust_id==rkv.ent_cust_id){
				        					nkv.ent_lvl=rkv.ent_lvl;
				        				}
				        			}
				        			rs.push(nkv);
				        		}
				        		return rs;
				        	})(ent_named_kv,result_kv);
			        	}
			        	
						//发送添加白名单请求
			        	$.ajax({
							type: "POST",
					        url: "/bmd/insertWhiteList",
					        contentType:"application/json",
					        data:(function(){
					        	var dataArr=[];
					        	for(var i=0;i<cachedQueue.length;i++){
					        		var d=cachedQueue[i];
									for(var j=0;j<ent_named_kv.length;j++){
										var e=ent_named_kv[j];
										if(d.ent_cust_id==e.ent_cust_id){
											var obj={};
											obj.ent_cust_id=d.ent_cust_id;
											obj.cust_idt_no=d.cust_idt_no;
											obj.ent_lvl=e.ent_lvl;
											obj.input_date="";
											obj.acc_org_id=d.proxy_org_id;
											dataArr.push(obj);
										}
									}
								}
					        	return dataArr;
					        })(cachedQueue,ent_cust_ids),
					        dataType: "json",
					        success: function (data1) {
					        	alert("白名单添加成功！")
					        },
					        error: function (message){
					        	console.log(message);
					        }
						}); 
			        },
			        error: function (message){
			        	console.log(message);
			        }
				}); 
			}
			
			
			
			/* 提交待删除的白名单 */
			function submitAddedWhiteList(){
				$.ajax({
					type: "POST",
			        url: "/bmd/deleteWhiteList",
			        contentType:"application/json",
			        data:(function(){
			        	var dataArr=[];
			        	for(var i=0;i<cachedQueue.length;i++){
			        		var d=cachedQueue[i];
							var obj={};
							obj.ent_cust_id=d.ent_cust_id;
							obj.cust_idt_no=d.cust_idt_no;
							obj.ent_lvl=d.ent_lvl;
							obj.input_date="";
							obj.acc_org_id=d.proxy_org_id;
							dataArr.push(obj);
						}
			        	return dataArr;
			        })(cachedQueue),
			        dataType: "json",
			        success: function (data) {
			        	alert("白名单删除成功！");
			        },
			        error: function (message){
			        	console.log(message);
			        }
				}); 
			}
			
			
			//根据数据画分页栏
			function setPageHtml(target,totalitem,curpageno,pagesize,groupsize,callback){
				var totalpages=parseInt(totalitem/pagesize)+(totalitem%pagesize==0?0:1);
				var totalgroups=parseInt(totalpages/groupsize)+(totalpages%groupsize==0?0:1);
				var curgroupno=parseInt(curpageno/groupsize)+(curpageno%groupsize==0?0:1);
				var startno=(curgroupno-1)*groupsize+1;
				var endno=curgroupno*groupsize>totalpages?totalpages:curgroupno*groupsize;
				
				var htmlArr=[];
				htmlArr.push('<div class="row">');
				htmlArr.push('<div class="col-md-6">');
				htmlArr.push('<div style="height:40px;padding:10px;"><span>共&nbsp;'+totalpages+'&nbsp;页</span>&nbsp;<span>当前第&nbsp;'+curpageno+'&nbsp;页</span></div>');
				htmlArr.push('</div>');
				htmlArr.push('<div class="col-md-6" style="text-align:right;">');
				htmlArr.push('<ul class="pagination" style="margin:5px;">');
				if(curgroupno<=1){
					htmlArr.push('<li  class="disabled"><a href="#">&laquo;</a></li>');
				}else{
					htmlArr.push('<li><a href="#">&laquo;</a></li>');
				}
				if(curpageno<=1){
					htmlArr.push('<li class="disabled"><a href="#">&lt;</a></li>');
				}else{
					htmlArr.push('<li><a href="#">&lt;</a></li>');
				}
				for(var i=startno;i<=endno;i++){
					if(i==curpageno){
						htmlArr.push('<li class="active"><a href="#"  onClick="'+callback+'('+curpageno+','+pagesize+')">'+i+'</a></li>');
					}else{
						htmlArr.push('<li><a href="#" onClick="'+callback+'('+i+','+pagesize+')">'+i+'</a></li>');
					}
				}
				if(curpageno>=totalpages){
					htmlArr.push('<li class="disabled"><a href="#">&gt;</a></li>');
				}else{
					htmlArr.push('<li><a href="#">&gt;</a></li>');
				}
				if(curgroupno>=totalgroups){
					htmlArr.push('<li class="disabled"><a href="#">&raquo;</a></li>');
				}else{
					htmlArr.push('<li><a href="#">&raquo;</a></li>');
				}
	    		htmlArr.push('</ul>');
				htmlArr.push('</div>');
				htmlArr.push('</div>');
				$("#"+target).html(htmlArr.join(""))
			}
			
			
			/* 启动应用 */
			$(document).ready(function(){
				getList(1,10);
			});
		</script>
    </head>
    <body>
    	<div class="container">
    		
			<div class="row" style="margin-top:10px;padding:0px 15px;">
				<table width="100%">
					<tr>
		    			<td style="width:15%;">
		    				<div style="width:95%;">
			    				<span class="label label-primary" style="width:55%;float:left;line-height:28px;border-top-right-radius:0; border-bottom-right-radius:0;">企业内部账户</span>
			    				<input type="text" class="form-control" id="qynbzh" style="width:45%;float:right;border-top-left-radius:0; border-bottom-left-radius:0;">
		    				</div>
		    			</div>
		    			<td style="width:15%;text-align:center;">
		    				<div style="width:95%;">
			    				<span class="label label-primary" style="width:40%;float:left;line-height:28px;border-top-right-radius:0; border-bottom-right-radius:0;">员工名称</span>
			    				<input type="text" class="form-control" id="ygmc" style="width:60%;float:right;border-top-left-radius:0; border-bottom-left-radius:0;">
		    				</div>
		    			</td>
		    			<td style="width:15%;text-align:center;">
		    				<div style="width:95%;">
			    				<span class="label label-primary" style="width:40%;float:left;line-height:28px;border-top-right-radius:0; border-bottom-right-radius:0;">身份证</span>
			    				<input type="text" class="form-control" id="sfxh" style="width:60%;float:right;border-top-left-radius:0; border-bottom-left-radius:0;">
		    				</div>
		    			</td>
		    			<td style="width:15%;text-align:center;">
		    				<div style="width:95%;">
			    				<span class="label label-primary" style="width:40%;float:left;line-height:28px;border-top-right-radius:0; border-bottom-right-radius:0;">月薪 >=</span>
			    				<input type="text" class="form-control" id="monthsalary" style="width:60%;float:right;border-top-left-radius:0; border-bottom-left-radius:0;" value="2000">
		    				</div>
		    			</td>
		    			<td style="width:15%;text-align:center;">
		    				<div style="width:95%;">
			    				<span class="label label-primary" style="width:55%;float:left;line-height:28px;border-top-right-radius:0; border-bottom-right-radius:0;">已发工资月数</span>
			    				<input type="text" class="form-control" id="months" style="width:45%;float:right;border-top-left-radius:0; border-bottom-left-radius:0;" value="6">
		    				</div>
		    			</td>
		    			<td style="width:15%;text-align:center;">
		    				<div style="width:95%;">
			    				<span class="label label-primary" style="width:30%;float:left;line-height:28px;border-top-right-radius:0; border-bottom-right-radius:0;">只筛选</span>
			    				<select class="form-control" id="cxlb" style="width:70%;float:right;border-top-left-radius:0; border-bottom-left-radius:0;font-size:90%;">
			    					<option value="1">所有客户</option>
			    					<option value="2">白名单客户</option>
			    					<option value="3">非白名单客户</option>
			    				</select>
		    				</div>
		    			</td>
		    			<td style="width:15%;text-align:center;">
		    				<button type="button" class="btn btn-info" onClick="getList(1,10);" style="width:60%;margin:0px 5%;">查询</button>
		    			</td>
	    			</tr>
    			</table>
    		</div>
    		<div class="row" style="margin-top:10px;">
    			<div class="col-md-12">
    				<table class='table table-bordered'>
			        	<thead>
			        		<tr class="active">
				        		<th style="width:10%"><input id="checkAll" type="checkbox"></th>
				        		<th>企业名称</th>
				        		<th>企业编号</th>
				        		<th>客户名称</th>
				        		<th>客户身份证</th>
				        		<th>是否白名单</th>
			        		</tr>
			        	</thead>
			        	<tbody id="tabBody"></tbody>
			        	<tfoot>
			        		<tr>
			        			<td colspan='6' style="padding:0px;" id="pageTarget">
			        				<!-- 分页组件 -->
			        				<!-- <div class="row">
			        					<div class="col-md-6">
			        						<div style="height:40px;padding:10px;"><span id="totalpage">共5页</span><span id="currentpage">当前第1页</span></div>
			        					</div>
			        					<div class="col-md-6" style="text-align:right;" id="pageTarget">
			        						<ul class="pagination"  style="margin:5px;" >
											    <li><a href="#">&laquo;</a></li>
											    <li><a href="#">1</a></li>
											    <li><a href="#">2</a></li>
											    <li><a href="#">3</a></li>
											    <li><a href="#">4</a></li>	
											    <li><a href="#">5</a></li>
											    <li><a href="#">&raquo;</a></li>
											</ul>
			        					</div>
			        				</div> -->
			        				<!-- 分页组件 -->
			        			</td>
			        		</tr>
			        	</tfoot>
			        </table>
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-md-12">
    				<div style="width:50%;float:left;text-align:right;">
    					<button type="button" class="btn btn-info" style="margin-right:5px;" onClick="joinWhite()">加入白名单</button>
    				</div>
    				<div style="width:50%;float:right;text-align:left;">
    					<button type="button" class="btn btn-info" style="margin-left:5px; onClick="deleteWhite()"">删除白名单</button>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
</html>